<template>
    <div class="user-info-container flex">
        <div class="user-info-box flex align-items-center">
            <el-avatar v-if="props.userInfo.url" size="30" :src="props.userInfo.url"/>
            <el-avatar v-else size="30" :src="logo"/>
            <div class="info">
                <div class="item">用户名：{{props.userInfo.name}}</div>
                <div class="item">游戏积分：{{props.userInfo.score||'0'}}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import logo from '@/assets/logo.png';
    import {defineProps} from 'vue';

    const props = defineProps({
        userInfo: {}
    });
</script>

<style scoped lang="less">
    .user-info-container {
        padding: 10px 15px;
        position: relative;
        height: 60px;

        .user-info-box {
            padding: 10px;
            background: rgba(155, 141, 128, 0.8);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-size: 12px;
            color: #fff;
            margin-right: 15px;

            img {
                width: 40px;
            }

            .info {
                margin-left: 10px;
            }
        }

        .introduce {
            text-align: center;

            img {
                height: 100px;
            }
        }
    }
</style>